﻿<template>
    <el-dialog
        :title="!dataForm.id ? '新建' : '编辑'"
        :close-on-click-modal="false"
        :visible.sync="visible"
        class="SHZY-dialog SHZY-dialog_center"
        lock-scroll
        width="600px"
    >
        <el-row :gutter="15" class="">
            <el-form
                ref="elForm"
                :model="dataForm"
                size="small"
                label-width="110px"
                label-position="right"
                :rules="rules"
            >
                <el-col :span="24">
                    <el-form-item label="配置编号" prop="code">
                        <el-input
                            v-model="dataForm.code"
                            placeholder="请输入打印配置编号"
                            maxlength="100"
                            show-word-limit
                            clearable
                            required
                            :style="{ width: '100%' }"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="配置名称" prop="name">
                        <el-input
                            v-model="dataForm.name"
                            placeholder="请输入打印配置名称"
                            maxlength="200"
                            show-word-limit
                            clearable
                            required
                            :style="{ width: '100%' }"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="打印模板" prop="printTemplateId">
                        <el-select
                            v-model="dataForm.printTemplateId"
                            placeholder="请选择打印模板"
                            clearable
                            required
                            :style="{ width: '100%' }"
                            filterable
                        >
                            <el-option
                                v-for="(item, index) in printTemplateIdOptions"
                                :key="index"
                                :label="item.fullName"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="数据源" prop="dataSourceId">
                        <el-select
                            v-model="dataForm.dataSourceId"
                            placeholder="请选择打印数据源"
                            clearable
                            required
                            :style="{ width: '100%' }"
                            filterable
                        >
                            <el-option
                                v-for="(item, index) in dataSourceIdOptions"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="是否匹配客户" prop="isCustomer">
                        <el-switch
                            v-model="dataForm.isCustomer"
                            :active-value="1"
                            :inactive-value="0"
                        >
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="有效标志" prop="enabledMark">
                        <el-switch
                            v-model="dataForm.enabledMark"
                            :active-value="1"
                            :inactive-value="0"
                        >
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form
                        ref="tableForm"
                        :model="dataForm"
                        :rules="tableRules"
                    >
                        <el-table
                            :data="dataForm.children"
                            required
                            size="mini"
                            ref="dragTable"
                            :row-key="row => row.index"
                        >
                            <el-table-column
                                prop="labefield"
                                label="标签变量"
                                min-width="100"
                            >
                                <template slot="header">
                                    <span class="required-sign">*</span>标签变量
                                </template>
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="
                                            'children.' +
                                                scope.$index +
                                                '.labefield'
                                        "
                                        :rules="tableRules.labefield"
                                    >
                                        <el-input
                                            v-model="scope.row.labefield"
                                            placeholder="请输入标签变量"
                                            maxlength="100"
                                            show-word-limit
                                            clearable
                                            required
                                        />
                                    </el-form-item>
                                </template>
                            </el-table-column>

                            <el-table-column
                                prop="rulerId"
                                label="标签规则"
                                min-width="100"
                            >
                                <template slot="header">
                                    <span class="required-sign">*</span>标签规则
                                </template>
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="
                                            'children.' +
                                                scope.$index +
                                                '.rulerId'
                                        "
                                        :rules="tableRules.rulerId"
                                    >
                                        <el-select
                                            v-model="scope.row.rulerId"
                                            placeholder="请选择标签规则"
                                            clearable
                                            required
                                            :style="{ width: '100%' }"
                                            filterable
                                        >
                                            <el-option
                                                v-for="(item,
                                                index) in dataRulerIdOptions"
                                                :key="index"
                                                :label="item.name"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="50">
                                <template slot-scope="scope">
                                    <el-form-item>
                                        <el-button
                                            type="text"
                                            class="SHZY-table-delBtn"
                                            @click="handleDel(scope.$index)"
                                            >删除</el-button
                                        >
                                    </el-form-item>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                    <div class="table-actions" @click="addHandle()">
                        <el-button type="text" icon="el-icon-plus"
                            >新建</el-button
                        >
                    </div>
                </el-col>
            </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button
                type="primary"
                @click="dataFormSubmit()"
                :loading="btnLoading"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>
<script>
import {
    getPrintConfigInfo,
    createPrintConfig,
    updatePrintConfig
} from "@/api/common/printConfig";
import { getPrintTemplateAllList } from "@/api/common/printTemplate";
import { getPrintDataAllList } from "@/api/common/printData";
import { getLabelRulesAllList } from "@/api/common/labelRules";

export default {
    components: {},
    props: [],
    data() {
        return {
            btnLoading: false,
            loading: false,
            visible: false,
            dataForm: {
                id: "",
                code: undefined,
                name: undefined,
                printTemplateId: undefined,
                isCustomer: 0,
                dataSourceId: undefined,
                labelRulerTemplate: undefined,
                enabledMark: 1,
                children: []
            },
            rules: {
                code: [
                    {
                        required: true,
                        message: "请输入打印配置编号",
                        pattern: "[^ \s]+",
                        trigger: '"blur"'
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入打印配置名称",
                        pattern: "[^ \s]+",
                        trigger: '"blur"'
                    }
                ],
                printTemplateId: [
                    {
                        required: true,
                        message: "请选择打印模板",
                        trigger: '"change"'
                    }
                ],
                dataSourceId: [
                    {
                        required: true,
                        message: "请选择数据源",
                        trigger: '"change"'
                    }
                ]
            },
            tableRules: {
                labefield: [
                    {
                        required: true,
                        message: "请输入标签变量",
                        pattern: "[^ \s]+",
                        trigger: '"blur"'
                    }
                ],
                rulerId: [
                    {
                        required: true,
                        message: "请选择标签规则",
                        trigger: '"change"'
                    }
                ]
            },
            printTemplateIdOptions: [],
            dataSourceIdOptions: [],
            dataRulerIdOptions: []
        };
    },
    computed: {},
    watch: {},
    created() {
        this.gettemplateList();
        this.getsourceList();
        this.getrulerList();
    },
    mounted() {},
    methods: {
        goBack() {
            this.$emit("refresh");
        },
        init(id) {
            this.dataForm.id = id || 0;
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["elForm"].resetFields();
                this.dataForm.children = [];
                if (this.dataForm.id) {
                    getPrintConfigInfo(this.dataForm.id).then(res => {
                        this.dataForm = res.data;
                        this.dataForm.children = [];
                        if (this.dataForm.labelRulerTemplate) {
                            this.dataForm.children = JSON.parse(
                                this.dataForm.labelRulerTemplate
                            );
                        }
                    });
                }
            });
            this.$store.commit("generator/UPDATE_RELATION_DATA", {});
        },
        handleDel(index, row) {
            this.dataForm.children.splice(index, 1);
        },
        addHandle() {
            let item = {
                //标签变量
                labefield: undefined,
                //标签规则
                rulerId: undefined
            };
            this.dataForm.children.push(item);
        },
        gettemplateList() {
            getPrintTemplateAllList().then(res => {
                this.printTemplateIdOptions = res.data.list;
            });
        },
        getsourceList() {
            getPrintDataAllList().then(res => {
                this.dataSourceIdOptions = res.data.list;
            });
        },
        getrulerList() {
            getLabelRulesAllList().then(res => {
                this.dataRulerIdOptions = res.data.list;
            });
        },
        dataFormSubmit() {
            this.$refs["elForm"].validate(valid => {
                if (valid) {
                    this.$refs["tableForm"].validate(valid => {
                        if (valid) {
                            this.btnLoading = true;
                            const arr = [];
                            let state = true;
                            for (const item of this.dataForm.children) {
                                if (arr.indexOf(item.labefield.trim()) > -1) {
                                    state = false;
                                    this.btnLoading = false;
                                    this.$message({
                                        message: "请勿添加重复标签数量",
                                        type: "error"
                                    });
                                    return;
                                }
                                arr.push(item.labefield.trim());
                            }
                            if (this.dataForm.children.length) {
                                this.dataForm.labelRulerTemplate = JSON.stringify(
                                    this.dataForm.children
                                );
                            }
                            if (state) {
                                if (!this.dataForm.id) {
                                    createPrintConfig(this.dataForm)
                                        .then(res => {
                                            this.$message({
                                                message: res.msg,
                                                type: "success",
                                                duration: 1000,
                                                onClose: () => {
                                                    this.btnLoading = false;
                                                    (this.visible = false),
                                                        this.$emit(
                                                            "refresh",
                                                            true
                                                        );
                                                }
                                            });
                                        })
                                        .catch(res => {
                                            this.btnLoading = false;
                                        });
                                } else {
                                    updatePrintConfig(this.dataForm)
                                        .then(res => {
                                            this.$message({
                                                message: res.msg,
                                                type: "success",
                                                duration: 1000,
                                                onClose: () => {
                                                    this.btnLoading = false;
                                                    this.visible = false;
                                                    this.$emit("refresh", true);
                                                }
                                            });
                                        })
                                        .catch(res => {
                                            this.btnLoading = false;
                                        });
                                }
                            }
                        }
                    });
                }
            });
        }
    }
};
</script>
